<script setup lang="ts">
import {onMounted, ref} from "vue";
import {bindingInformation, initiateAPayout, payoutInformation} from "/@/api";
import {Toast} from "vant";
import {useRoute} from "vue-router";
import {callIosMethoController, callIosMethoExit} from "/@/utils/hooks";


let moneyData: any = ref<any>([])

let moneyIndex = ref(-1)
let payoutsIndex = ref(-1)
const show = ref(false);
let loadingShow = ref(false)

function moneyChange(index: number) {
  moneyIndex.value = index
}

function payoutsChange(index: number) {
  payoutsIndex.value = index
}

const name = ref()
const account = ref()
const myInfo = ref()


//绑定
async function submitBinding() {
  console.log(name.value)
  const money = moneyData.value[moneyIndex.value].money
  console.log(money, 'money')
  const data = {
    type: 1,
    real_name: name.value,
    account: account.value,
    id_card: myInfo.value
  }
  console.log(data, 'data')
  const res: any = await payoutInformation(data)
  console.log(res, '绑定提现信息')
  if (res.code === 200) {
    Toast({
      message: res.msg,
      position: 'top',
    });
    show.value = false;
    //更新列表
    await bindingInformChange()
  } else {
     Toast({
      message: res.msg,
      position: 'top',
    });
  }
}


const messageNotify = ref('')


//提现
async function showPopup() {
  console.log(payoutsIndex.value, '2211')
  if (payoutsIndex.value === -1) {
    console.log('33333')
    Toast({
      message: '请选择提现方式！',
      position: 'top',
    });
  } else if (payoutsIndex.value === 1) {
    if (moneyIndex.value === -1) {
      Toast({
        message: '请选择提现金额！',
        position: 'top',
      });
    }
    const obj = Object.keys(zfbInfo.value)
    console.log(obj, 'pbj')
    if (obj.length === 0) {
      //没有绑定信息则弹窗处理填写绑定信息
      show.value = true;
    } else {
      //有绑定的信息就直接提现
      console.log(zfbInfo.value, 'obj 提现信息')
      const data = {
        type: 1,
        exchange_id: moneyData.value[moneyIndex.value].id,
      }
      console.log(data, 'data')
      loadingShow.value = true
      const res: any = await initiateAPayout(data)
      console.log(res, '提现结果')
      if (res.code === 200) {
        loadingShow.value = false
        Toast({
          message: res.msg,
          position: 'top',
        });
        await bindingInformChange()
      } else {
        loadingShow.value = false
        Toast({
          message: res.msg,
          position: 'top',
        });
      }
    }

  } else if ((payoutsIndex.value === 2)) {
    Toast({
      message: '暂不支持微信!',
      position: 'top',
    });
  }
}

function showToastChange(payload: string) {
  console.log(payload, 'payload')
}

const username = ref('');
const password = ref('');
const onSubmit = (values: any) => {
  console.log('submit', values);
};

const pointsMoney = ref(0)

// 绑定支付宝信息
const zfbInfo = ref()
// 绑定微信信息
const weixinInfo = ref()

//我的余额和绑定信息
async function bindingInformChange() {
  loadingShow.value = true
  const res: any = await bindingInformation({})
  console.log(res, 'res列表')
  if (res.code === 200) {
    loadingShow.value = false
    const {wtd_list, points, wechat_info, alipay_info} = res.data.info
    //提现金额
    moneyData.value = wtd_list
    pointsMoney.value = points
    // 绑定支付宝信息
    zfbInfo.value = alipay_info
    // 绑定微信信息
    weixinInfo.value = wechat_info
  } else {
    loadingShow.value = false
  }
}


function backChange(type: string) {
  console.log(type, 'type')
  if (type === '3') return
  const data = {
    type: 2,
    url: type === '1' ? 'Secret_BillFlowViewController' : type === '2' ? 'Secret_CustomerServiceViewController' : type === '4' ? 'Secret_RevenueSettingsViewController' : ''
  }
  const str = `{\"type\":2,\"url\":\"${data.url}\"}`
  callIosMethoController(str)
}


// 关闭界面
function leftBack() {
  const str = "{\"type\":3}"
  callIosMethoExit(str)
}

onMounted(async () => {
  await bindingInformChange()
})

</script>

<template>
  <div class="earnings_wrapper">
    <van-loading type="spinner" color="#1989fa"
                 v-if="loadingShow"
                 style="display: flex;justify-content: center;position: fixed;top: 50%;left: 50%;transform: translate(-50%,-50%);"
    />
    <van-popup
      v-model:show="show"
      closeable
      round
      close-icon="close"
      position="bottom"
      :style="{ height: '30%' }"
      :close-on-click-overlay="false"
      @open="showToastChange('open')"
      @close="showToastChange('close')"
      style="height: 393px"
    >
      <div class="from_wrapper">
        <span class="title_">提现账户绑定</span>
        <div class="message_wrapper">
          <span>请填写真实提现信息，</span>
          <span>并需要与认证的身份证</span>
        </div>
        <div class="from_">
          <van-form @submit="onSubmit">
            <div class="info_wrapper">
              <div class="input_ input_wrapper">
                <span>姓名：</span>
                <input type="text" :placeholder="'请输入支付宝真实姓名'" v-model="name">
              </div>
              <div class="input_ input_wrapper">
                <span>账号：</span>
                <input type="text" :placeholder="'支付宝账号（手机号）或邮箱'" v-model="account">
              </div>
              <div class="input_ input_wrapper">
                <span>身份证：</span>
                <input type="text" :placeholder="'请输入真实有效的身份证号码'" v-model="myInfo">
              </div>
            </div>
            <div style="margin: 25px auto 15px">
              <van-button round block type="primary" native-type="submit" class="submit_payouts" @click="submitBinding">
                立即绑定
              </van-button>
            </div>
          </van-form>
        </div>
        <span class="message_">一经绑定无法修改，请认真填写~</span>
      </div>
    </van-popup>
    <div class="nav_wrapper">
      <img src="../../assets/income/4.png" alt="" @click="leftBack">
      <span>我的收益</span>
      <div class="right_">
        <span @click="backChange('1')">收益明细</span>
        <img src="../../assets/income/7.png" alt="" @click="backChange('2')">
      </div>
    </div>
    <div class="main_wrapper">
      <div class="top_wrapper">
        <div class="recording_wrapper">
          <img src="../../assets/income/9.png" alt="">
          <div class="text1">
            <div class="left_wrapper">
              <img src="../../assets/income/2.png" alt="">
              <span>{{ pointsMoney }}</span>
            </div>
            <div class="right_wrapper">
              <span @click="backChange('3')">提现记录</span>
              <img src="../../assets/income/6.png" alt="">
            </div>
          </div>
          <div class="text2_wrapper">
            <div class="left_">
              <div class="info_1">
                <img src="../../assets/income/3.png" alt="">
                <span>1桃豆/条</span>
              </div>
              <div class="info_1">
                <img src="../../assets/income/11.png" alt="">
                <span>1桃豆/条</span>
              </div>
              <div class="info_1">
                <img src="../../assets/income/10.png" alt="">
                <span>1桃豆/条</span>
              </div>
            </div>
            <div class="right_" @click="backChange('4')">
              <span>去调价</span>
              <img src="../../assets/income/5.png" alt="">
            </div>
          </div>
        </div>
      </div>
      <div class="money_wrapper">
        <div class="title_">
          提现金额
        </div>
        <div class="selected_money">
          <div :class="index===moneyIndex?'item_wrapper active_':'item_wrapper'" v-for="(item,index) in moneyData"
               :key="index" @click="moneyChange(index)">
            <div class="number_">
              <span>{{ item.money }}</span>
              <span>元</span>
            </div>
            <div class="message_wrapper">
              {{ item.amount }}桃豆
            </div>
          </div>
        </div>
      </div>
      <div class="withdrawalMethod">
        <div class="title_">
          提现方式
        </div>
        <div class="payouts_wrapper">
          <div :class="payoutsIndex===1?'active_ item_wrapper':'item_wrapper'" @click="payoutsChange(1)">
            <img src="../../assets/income/1.png" alt="">
            <span>支付宝</span>
          </div>
          <div :class="payoutsIndex===2?'active_ item_wrapper':'item_wrapper'" @click="payoutsChange(2)">
            <img src="../../assets/income/8.png" alt="">
            <span>微信</span>
          </div>
        </div>
        <div class="info_">提现说明：每天可以提现一次，3天内到账</div>
        <div class="submit_wrapper">
          <div @click="showPopup">
            立即提现
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.earnings_wrapper {
  padding-top: 43.98px;

  .submit_payouts {
    background: linear-gradient(90deg, #E4E5FE 0%, #E7DBFD 100%) !important;
    border-radius: 28px;
    border: none;
  }

  .from_wrapper {
    display: flex;
    flex-direction: column;
    padding: 20px 15px 15px;

    > .message_ {
      font-weight: 400;
      font-size: 12px;
      color: #996CF6;
      line-height: 17px;
      text-align: center;
      font-style: normal;
    }

    > .title_ {
      text-align: center;
      font-weight: 500;
      font-size: 16px;
      color: #24282F;
      line-height: 22px;
      font-style: normal;
    }

    > .message_wrapper {
      margin-top: 10px;
      font-weight: 400;
      font-size: 14px;
      color: #C8CBD2;
      line-height: 20px;
      text-align: center;
      font-style: normal;

      span:last-child {
        color: #996CF6;
      }
    }

    .from_ {
      margin-top: 25px;
    }

    .input_wrapper {
      margin-bottom: 15px;
    }

    .input_ {
      width: 345px;
      height: 60px;
      background: #F8F8FA;
      border-radius: 15px;
      display: flex;
      align-items: center;
      padding: 0 20px;

      font-weight: 400;
      font-size: 15px;
      color: #CED1D6;
      line-height: 21px;
      font-style: normal;

      > input {
        flex: 1;
        border: none;
        /* 可选的样式，以去除焦点时的边框 */
        outline: none;
        background: #F8F8FA;
        font-weight: 400;
        font-size: 15px;
        color: #24282F;
        line-height: 21px;
        font-style: normal;
      }
    }
  }

  > .nav_wrapper {
    padding: 6px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    //position: relative;
    width: 375px;
    height: 44px;
    background: #FFFFFF;
    box-shadow: inset 0px -1 0px 0px #F6F7F9;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 9999;

    > img {
      width: 32px;
      height: 32px;
      vertical-align: middle;
    }

    > span {
      font-weight: 500;
      font-size: 16px;
      color: #24282F;
      font-style: normal;
      position: absolute;
      left: 50%;
      transform: translate(-50%);
    }

    > .right_ {
      > span {
        font-weight: 400;
        font-size: 14px;
        color: #787D87;
        font-style: normal;
      }

      > img {
        width: 32px;
        height: 32px;
        vertical-align: middle;
      }
    }
  }

  > .main_wrapper {
    padding: 15px;

    > .top_wrapper {
      > .recording_wrapper {
        width: 345px;
        height: 106px;
        position: relative;
        display: flex;
        flex-direction: column;

        > img {
          position: absolute;
          width: 345px;
          height: 106px;
          vertical-align: middle;
          z-index: -1;
        }

        > .text1 {
          display: flex;
          align-items: center;
          padding: 15px;
          justify-content: space-between;

          > .left_wrapper {
            display: flex;
            align-items: center;

            > img {
              width: 22px;
              height: 22px;
              vertical-align: middle;
            }

            > span {
              font-weight: 600;
              font-size: 30px;
              color: #FFFFFF;
              font-style: normal;
              margin-left: 10px;
            }
          }

          > .right_wrapper {
            display: flex;
            align-items: center;

            > img {
              vertical-align: middle;
              width: 16px;
              height: 16px;
            }

            > span {
              font-weight: 500;
              font-size: 14px;
              color: #FFFFFF;
              font-style: normal;
            }
          }
        }

        > .text2_wrapper {
          width: 345px;
          height: 37px;
          background: rgba(255, 255, 255, 0.1);
          border-radius: 10px;
          border: 1px solid rgba(255, 255, 255, 0.3);
          position: absolute;
          bottom: 0;
          left: 0;
          padding: 0 15px 0 10px;
          display: flex;
          align-items: center;
          justify-content: space-between;

          > .left_ {
            display: flex;
            align-items: center;

            > .info_1 {
              &:not(:last-child) {
                margin-right: 10px;
              }

              > img {
                width: 15px;
                height: 15px;
                vertical-align: middle;
              }

              > span {
                font-weight: 500;
                font-size: 12px;
                color: #FFFFFF;
                line-height: 17px;
                font-style: normal;
                margin-left: 1px;
              }
            }
          }

          > .right_ {
            > img {
              width: 11px;
              height: 11px;
              vertical-align: middle;
            }

            > span {
              font-weight: 500;
              font-size: 12px;
              color: #FFFFFF;
              line-height: 17px;
              font-style: normal;
            }
          }
        }
      }
    }

    > .withdrawalMethod {
      > .title_ {
        font-weight: 500;
        font-size: 14px;
        color: #24282F;
        line-height: 20px;
        font-style: normal;
        margin-bottom: 15px;
      }

      > .info_ {
        font-weight: 400;
        font-size: 12px;
        color: #C8CBD2;
        line-height: 17px;
        font-style: normal;
        margin-top: 15px;
      }

      > .submit_wrapper {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 27px;

        > div {
          width: 345px;
          height: 55px;
          background: linear-gradient(90deg, #9398FC 0%, #9E6EF9 100%);
          border-radius: 28px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-weight: 500;
          font-size: 15px;
          color: #FFFFFF;
          line-height: 21px;
          text-align: center;
          font-style: normal;
        }
      }

      > .payouts_wrapper {
        display: flex;
        justify-content: space-between;

        > .item_wrapper {
          width: 167px;
          height: 71px;
          background: #F9F7FE;
          border-radius: 10px;
          display: flex;
          align-items: center;
          justify-content: center;

          &.active_ {
            width: 167px;
            height: 71px;
            background: #F9F7FE;
            border-radius: 10px;
            border: 1px solid #9467F2;
          }

          > img {
            width: 31px;
            height: 31px;
            vertical-align: middle;
          }

          > span {
            font-weight: 400;
            font-size: 15px;
            color: #24282F;
            line-height: 21px;
            font-style: normal;
            margin-left: 10px;
          }
        }
      }
    }

    > .money_wrapper {
      margin-top: 20px;
      margin-bottom: 15px;

      > .title_ {
        font-weight: 500;
        font-size: 14px;
        color: #24282F;
        line-height: 20px;
        font-style: normal;
        margin-bottom: 15px;
      }

      > .selected_money {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;

        > .item_wrapper {
          margin-bottom: 10px;
          display: flex;
          flex-direction: column;
          width: 168px;
          height: 78px;
          background: #F6F7F9;
          border-radius: 10px;
          align-items: center;
          justify-content: center;

          &.active_ {
            width: 168px;
            height: 78px;
            background: #F9F7FE;
            border-radius: 10px;
            border: 1px solid #9467F2;
          }

          > .number_ {
            margin-bottom: 4px;

            span:first-child {
              font-weight: 500;
              font-size: 22px;
              color: #24282F;
              line-height: 30px;
              font-style: normal;
              margin-right: 5px;
            }

            span:last-child {
              font-weight: 400;
              font-size: 13px;
              color: #24282F;
              line-height: 18px;
              font-style: normal;
            }
          }

          > .message_wrapper {
            font-weight: 400;
            font-size: 12px;
            color: #C8CBD2;
            line-height: 17px;
            font-style: normal;
          }
        }
      }
    }
  }
}
</style>